import { Fragment, ReactNode, Component } from "react"
import { Button, Space, Table ,Modal} from 'antd'
import Modif from "../../components/Modif"
import TablePlus from "../../components/TablePlus"
export interface IAdmin {
    id: number
    name: string
    mobile: string
    email: string
}
interface IState {
    loading: boolean,
    adminList: IAdmin[],
    current: number,
    hideOnSinglePage: boolean,
    size: number,
    total: number,
    whetherShowModif : boolean,
    choseid : number,
}

// const columns = [
//     {
//         title: '姓名',
//         dataIndex: 'name',
//         key: 'name',
//     },
//     {
//         title: '年龄',
//         dataIndex: 'age',
//         key: 'age',
//     },
//     {
//         title: '住址',
//         dataIndex: 'address',
//         key: 'address',
//     },
//     {
//         title: '操作',
//         dataIndex: 'actions',
//         key: 'actions',
//         render:  (text:any) => (
//             <div>
//                 <Button type="primary">修改2</Button>
//                 <Modif  visible={this.state.showAddAdmin}
//                     callback={this.hiddenAddAdmin} ></Modif>
//                 <Button type="ghost" style={{marginLeft:"5px"}}>删除</Button>
//             </div>
//           ),

//     }
// ];

const dataSource = [
    {
        id : 1,
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
        actions : "11"
    },
    {
        id : 2,
        key: '2',
        name: '胡彦2祖',
        age: 42,
        address: '西湖区湖底公园1号',
    },
];



export default class AdminList extends Component<any, IState>  {
    columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            show : true,
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            show : true,
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
            show : true,
        },
        {
            title: '操作',
            dataIndex: 'actions',
            key: 'actions',
            show : false,
            render:  (text:any,data :any) => (
                <div>
                    <Button type="primary" onClick={this.clickEdit.bind(this,data)}>修改2</Button>
                    <Button type="ghost" style={{marginLeft:"5px"}}>删除</Button>
                </div>
              ),
    
        }
    ];
    constructor(props: any, context: any) {
        super(props, context)
        this.state = {
            loading: false,
            adminList: [],
            current: 1,
            hideOnSinglePage: true,
            size: 10,
            total: 0,
            whetherShowModif: false,
            choseid: 0,
        }
    }
    // 修改页数
    change = (pagination: any) => {
        console.log("改变")
    }
    // 点击修改按钮
    clickEdit = (admin : IAdmin) => {
        console.log(admin)
        this.setState({
            choseid: admin.id
        })
        this.setState((prevState, props) => ({
            whetherShowModif: !this.state.whetherShowModif
        }))
        console.log(this.state.whetherShowModif)
    }
    shouldComponentUpdate(){
        return true
    }
      // 隐藏添加管理员
    hiddenAddAdmin = (reflash?: boolean) => {
        this.setState({ whetherShowModif: !this.state.whetherShowModif })
    }
     render() {
        return (
            <div>
                 <Modif
                    visible={this.state.whetherShowModif} 
                    callback={this.hiddenAddAdmin}
                    formFileds = {this.columns}
                    choseid = {this.state.choseid}
                    ></Modif>
                <Table
                    dataSource={dataSource}
                    pagination={{
                        position: ['bottomCenter'],
                        total: this.state.total,
                        pageSize: this.state.size,
                        showSizeChanger: false,
                    }}
                    columns={this.columns}
                    rowKey={'key'}
                    onChange={this.change}
                />;
            </div>
        )
    }
}